@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
body
{
background-image:url(carte\ de\ Maurice.png); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;
width: 100%;
height:auto;
object-fit:cover;
object-position:center;
}
h1
{
text-align:center; 
text-shadow:7px 3px 3px red;
color: blue;
font-weight:900;
}
h1 p
{
font-size:1rem;
text-shadow:none;
background-color: darkgray;
width:300px;
margin-left:auto;
margin-right:auto;
font-family: "Pacifico", cursive;
font-weight: 400;
font-size:clamp(1rem,2vw,18rem);
}
@keyframes slideshow__fade {
    0% {
      opacity: 0;
      z-index: 2;
    }
    6.6666666667% {
      opacity: 1;
    }
    26.6666666667% {
      opacity: 1;
    }
    27.6666666667% {
      opacity: 0;
      z-index: 1;
    }
    100% {
      opacity: 0;
    }
  
  }
  .diaporama {
    position: relative;
    display: flex;
    place-content:center;
    width:100%;
    height:auto;
  }
  .diaporama img:not(:first-child) {
    position: absolute;
    left: center;
    top:center;
    margin:  auto;
    animation-duration: 30s; /*On retrouve nos 30 secondes ici */
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: slideshow__fade;
    animation-timing-function: ease-in;
    transition: opacity 2s ease-in;
  }
  .diaporama img:nth-child(1) {
    animation-delay: 0s;
  }
  .diaporama img:nth-child(2) {
    animation-delay: 6s;
  }
  .diaporama img:nth-child(3) {
    animation-delay: 12s;
  }
  .diaporama img:nth-child(4) {
    animation-delay: 18s;
  }
  .diaporama img:nth-child(5) {
    animation-delay: 24s;
  }
  .diaporama img:nth-child(1) {
  animation-delay: 0s;
}
.diaporama img:nth-child(2) {
  animation-delay: 6s;
}
.diaporama img:nth-child(3) {
  animation-delay: 12s;
}
.diaporama img:nth-child(4) {
  animation-delay: 18s;
}
.diaporama img:nth-child(5) {
  animation-delay: 24s;
}
 h2 
 {
text-align:center;
background-color:bisque;
border-radius:10px;
max-width:300px;
margin:auto;
margin-top:40px;
font-family: "Pacifico", cursive;
font-weight: 400;
font-size:clamp(1rem,2.5vw,18rem);
 }
 .gif
 {
 
  display: grid;
  place-content:center;
  margin-left:auto;
  margin-right:auto;
  margin-top:30px;
  width: 60%;
  height: auto;

 }
 .gif:hover
 {
  transform:scale(1.3);
 }
 h2 p
 {
 font-size:0.1rem;
 }